<template>
    <div class="contents">
        <div class="banners">
            <img src="@/assets/gws.png" alt="">
            <div @click="go">返回</div>
        </div>
        <div class="list" ref="scrollContainer" @scroll="handleScroll">
            <div class="lists" v-for="item in list">
                <div class="d-f j-b">
                    <div class="f28 f-w c29">{{item.title}}</div>
                    <div class="f28 c33" style="width: 70%;text-align: right;">{{item.company_title}}</div>
                </div>
                <div class="mt-20">
                    <div class="c33 f22">行业类型：{{item.hangye}} <span>|</span> 招聘人数：{{item.gwrs}}人 </div>
                </div>
            </div>
            <div class="t-c f28 cc9" style="margin-top:10px;" v-if="text">我也是有底线的~</div>

        </div>
    </div>
</template>

<script lang="ts" setup>
import Navi from "./Navi.vue";
import { ref, onMounted } from "vue";
import { zprs } from "@/axios/index";
import { showSuccessToast,showConfirmDialog} from "vant";
import router from "@/router";

const scrollContainer = ref(null); // 引用滚动容器元素
const page = ref(1);
const lastPage = ref<number>(0);
const text = ref(false);
const go = async (val) => {
    router.go(-1)
};
const list = ref([]);
const tdjlss = async (val) => {
    let { data } = await zprs({
        page:page.value,
        page_size:10
    });
    if (data.code == 200) {
        lastPage.value = Math.ceil(data.data.total/10)
        console.log(lastPage.value);
        if (page.value == 1) {
            list.value = data.data.list
            text.value =  false
        } else {
            list.value = list.value.concat(data.data.list)
            text.value =  false
        }
    } else {

    }
};
const handleScroll = () => {
    if (scrollContainer.value.scrollTop + scrollContainer.value.clientHeight >= scrollContainer.value.scrollHeight) { // 判断是否滚动到底部（此处可根据实际需要进行调整）
        
        if (page.value >= lastPage.value) {
            text.value = true
            return false
        }
        page.value += 1
        tdjlss()
    }
};
onMounted(() => {
    tdjlss()
});
</script>

<style lang="scss" scoped>
.contents{
    background: #B5D9FD;
    height: 100vh;
    .list{
        padding: 23px;
        margin: 14px;
        margin-top: -50px;
        background-color: #fff;
        border-radius: 10px;
        z-index: 99;
        position: relative;
        height: calc(100vh - 260px);
        overflow: auto;
        .lists{
            background: #F4F4F4;
            margin-bottom: 21px;
            padding: 26px 34px;
            border-radius: 30px 30px 30px 30px;
            span{
                padding: 0 10px;
            }
        }
    }
}
</style>